﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>淘宝幻灯片上下滑动效果</title>
		<link href = "css.css" rel = "stylesheet" type = "text/css" />
		<script src = "../jquery-1.10.1.min.js"></script>
		<script>
			$(function(){
				var oUl = $("#play").find("ul");
				var aLis = oUl.find("li");
				var aBtns = $("#play").find("ol").find("li");

				var timer = null; //每两秒切换一张图片
				var iNow = 0; //当前展示的图片的下标

				//给按钮添加点击，点击按钮的，切换图片
				aBtns.click(function(){
					iNow = $(this).index();
					tab();
				})

				//启动一个定时器，每隔两秒，切换一张图片
				timer = setInterval(function(){
					iNow++;
					tab();
				}, 2000);


				//给整个banner图添加移入移出
				$("#play").mouseenter(function(){
					clearInterval(timer);
				})

				$("#play").mouseleave(function(){
					timer = setInterval(function(){
						iNow++;
						tab();
					}, 2000);
				});

				function tab(){
					aBtns.attr("class", "").eq(iNow).attr("class", "active");
					//如果当前显示的下标为5的图片，应该让按钮0被选中
					if(iNow == aBtns.size()){
						aBtns.eq(0).attr("class", "active");
					}

					oUl.animate({top: -150 * iNow}, 500, function(){
						if(iNow == aBtns.size()){
							oUl.css("top", 0);
							iNow = 0;
						}
					})
				}
			})
		</script>
	</head>
	<body>
	<div class="play" id="play">
	    <ol>
	    	<li class="active">1</li>
	        <li>2</li>
	        <li>3</li>
	        <li>4</li>
	        <li>5</li>
	    </ol>
		<ul>
			<!-- 
				可以将第一张图片，添加到最后一张图片的后面，
				当最后一张图片动画，结束的时候，直接切回第一张
			 -->
			<li><a href="http://www.baidu.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
			<li><a href="http://www.baidu.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
			<li><a href="http://www.baidu.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
			<li><a href="http://www.baidu.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
			<li><a href="http://www.baidu.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
			<li><a href="http://www.baidu.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
		</ul>
	</div>
	</body>
</html>








